@import url('reset.css');

/********
 * styles
 ********/
body{background-color:#FEFEFE;font:11pt Arial,Helvetica,sans-serif;color:#444;}
.box{background-color:#FFF;border:1px solid #DDD;
	border-radius: 10px; -moz-border-radius: 10px; display:block; 
}
h1{font-size:20pt;color:#037;}
h2{font:italic 24px/35px Georgia,"Times New Roman","Bitstream Charter",Times,serif;}
a,a.a1{color:#059;}
a.a2{color:#F22;font-weight:bold;}
a.a3{color:#FFF;}

.desc{font-style:italic;font-size:0.85em;}
.hr{clear:both;margin:10px 2px; border-top:1px solid #CCC;}
.sprt{display:inline-block;width:0px;text-align:center;}

.red{color:#F00 !important;}
.green{color:#080 !important;}
.orange{color:#A50 !important;}

/********
 * navigation
 ********/
div#navi-top{position:relative;top:0;width:100%;height:40px;background:transparent url('images/bar.png') repeat;color:#EEE;}
div#navi-top-inner{position:relative;margin:0 auto;width:755px;height:22px;padding:7px 18px 7px 214px;background:url("images/bar-inner.png") no-repeat scroll center top transparent;}
div#navi-top a#logo{position:absolute;left:14px;top:0;height:65px;width:188px;}

div#navi-top ul li {display:block;height:40px;line-height:40px;width:140px;}
div#navi-top ul li a {display:block;height:40px;line-height:40px;padding:0 10px;}
div#navi-top ul li li {width:140px;background-color:#BF0101;height:28px;line-height:28px;font-size:12px;}
div#navi-top ul li li a {height:28px;line-height:28px;padding:0 10px;}

div#navi-top ul li ul{display:none;margin-top:-5px;border:1px solid #999;border-top:0;
-webkit-box-shadow: 0px 2px 2px #000;
-moz-box-shadow: 0px 2px 2px #000;
box-shadow: 0px 2px 2px #666; }
div#navi-top ul li:hover ul{display:block;}
div#navi-top ul li a:hover{text-decoration:none;}
div#navi-top ul li li a:hover{background:#FFF;color:#BF0101;text-decoration:none;}


div#navi-left{width:100%;margin:-4px 0px;border-bottom:1px solid #BBB;background-color:#CCC;height:50px;}
div#navi-left > ul {width:614px; margin:0 auto;padding:16px 0 0 240px;background-color:transparent;}
div#navi-left > ul li {margin:0 2px;float:left;height:24px;}
div#navi-left > ul > li ul {display:none;position:absolute;left:0;}
div#navi-left > ul > li > a { display:block;border-bottom:0;
  background-color:#8F0101; color:#FFF; text-align:center;
  font-size:14px; padding:5px 12px;
  height:24px;line-height:24px;
  border-top-left-radius: 8px; -moz-border-radius-topleft: 8px;
	border-top-right-radius: 8px; -moz-border-radius-topright: 8px;
}

div#navi-left > ul > li.selected > a{font-weight:bold;color:#BF0101;background-color:#EFEFEF;}
div#navi-left li li.selected > a{font-weight:bold;}

div#navi-left-sub{border-bottom:1px solid #DDD;background-color:#EFEFEF;margin-top:4px;height:24px;}
div#navi-left-sub ul{ margin:0 auto;width:614px; margin:0 auto;padding:3px 0 0 240px;}
div#navi-left-sub ul li{float:left;}
div#navi-left-sub ul li a{font-size:12px;padding:1px 15px 3px;color:#555;}
div#navi-left-sub ul li.selected a{font-weight:bold;}

/********
 * layout
 ********/
body{min-width:831px;}
div#middle{width:980px;margin:5px auto;background-color:#FFF;}
div#content{float:left; width:100%;margin:0 10px;padding:20px 0;color:#464646;}
div#foot{font-size:0.8em;text-align:center;padding:100px 0 20px 0;}

/********
 * form
 ********/
label{display:block;margin:5px 0 0 0px;}
input[type="text"],input[type="password"]{padding:3px;font-size:24px;border:1px solid #EEE;width:300px;}
select{font-size:20px;border:1px solid #EEE;width:300px;padding:3px;}
select option{padding:2px;}
button,a.bt1,a.bt2,a.bt3{padding:4px 15px;font-weight:bold;font-size:16px;color:#FFF;background-color:#E00; }
a.bt1:hover,a.bt2:hover,a.bt3:hover{text-decoration:none;}
input[type="text"].small{font-size:0.85em;width:50%;display:inline;}
select.small{font-size:0.85em;width:50%;display:inline;}
img.attachmentico{width:70px;}

button,button.bt1,a.bt1 { 
	-moz-border-radius:6px; border-radius:6px; 
	background-color:rgb(203,203,203);
	text-shadow:0px 1px 1px #4b4b4b;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(153,153,153)),
		color-stop(1, rgb(203,203,203))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(153,153,153) 0%,
		rgb(203,203,203) 100%
	);
}
button.bt2,a.bt2 { 
	-moz-border-radius:6px; border-radius:6px; 
	background-color:rgb(152,152,152);
	text-shadow:0px 1px 1px #343434;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(102,102,102)),
		color-stop(1, rgb(152,152,152))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(102,102,102) 0%,
		rgb(152,152,152) 100%
	);
}

button.bt3,a.bt3 { 
	-moz-border-radius:6px; border-radius:6px; 
	background-color:rgb(228,0,0);
	text-shadow:0px 1px 1px #570000;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(1, rgb(228,0,0)),
		color-stop(0, rgb(182,0,0))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(182,0,0) 0%,
		rgb(228,0,0) 100%
	);
}


div.pinstack{width:180px;float:left;}
div.pinclearstack{width:70px;float:left;margin-top:4px;}
div.sixdigitpin{
   -moz-user-select: none;
   -khtml-user-select: none;
   user-select: none;
}
span.sixdigitpin{display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;color:white;background-color:#BF0101;margin:3px;cursor:pointer;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-shadow:0px 1px 1px #570000;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(1, rgb(228,0,0)),
		color-stop(0, rgb(182,0,0))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(182,0,0) 0%,
		rgb(228,0,0) 100%
	);
	}
span.sixdigitpin:hover{
	text-shadow:0px 1px 1px #570000;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(1, rgb(228,0,0)),
		color-stop(0, rgb(182,0,0))
	);
	background-image: -moz-linear-gradient(
		center top,
		rgb(182,0,0) 0%,
		rgb(228,0,0) 100%
	);
}


/********
 * table
 ********/
 div.box div.filter{
	padding:4px 0 4px 25px;
	color:#404040;
	font:normal 10pt arial;
	text-shadow: 1px 1px 2px #fff;
	background-color:rgb(198,198,198);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(198,198,198)),
		color-stop(1, rgb(229,229,229))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(198,198,198) 0%,
		rgb(229,229,229) 100%
	);
}
div.box div.filter table td{ vertical-align:middle; }
div.box table.boxlist{width:100%;}
div.box table.boxlist thead tr th{background-color:#e6e6e6; height:38px; vertical-align:middle; border-left:1px solid #d9d9d9;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(227,227,227)),
		color-stop(1, rgb(238,238,238))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(227,227,227) 0%,
		rgb(238,238,238) 100%
	);
}
div.box table.boxlist thead tr th:first-child{
  border-top-left-radius: 8px; -moz-border-radius-topleft: 8px;
}
div.box table.boxlist thead tr th:last-child{
	border-top-right-radius: 8px; -moz-border-radius-topright: 8px;
}
div.box table.boxlist tbody tr td,
div.box table.boxlist tfoot tr td{border-left:1px solid #d9d9d9;padding:8px;}
div.box table.boxlist tbody tr td:first-child,
div.box table.boxlist tfoot tr td:first-child,
div.box table.boxlist thead tr th:first-child{border-left:0;}
div.box table.boxlist tbody tr {background-color:#FFF;}
div.box table.boxlist tbody tr:nth-child(odd) {background-color:#f3f3f3;}


div.box div#foot{
	padding:6px 0 9px 12px;
	color:#CCC;
	font:normal 10pt tahoma;
	border-bottom-left-radius: 8px; -moz-border-radius-bottomleft: 8px;
	border-bottom-right-radius: 8px; -moz-border-radius-bottomright: 8px;
	background-color:#035;
}
div.box div#foot a{color:#FFF;}
div.box div#head{
	padding:6px 0 9px 12px;
	color:#CCC;
	font:normal 10pt tahoma;
	border-top-left-radius: 8px; -moz-border-radius-topleft: 8px;
	border-top-right-radius: 8px; -moz-border-radius-topright: 8px;
	background-color:#035;
}
div.box div#head a{color:#FFF;}
div.box div#head2{
	padding:6px 0 9px 12px;
	color:#CCC;
	font:normal 10pt tahoma;
	border-top-left-radius: 8px; -moz-border-radius-topleft: 8px;
	border-top-right-radius: 8px; -moz-border-radius-topright: 8px;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(227,227,227)),
		color-stop(1, rgb(238,238,238))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(227,227,227) 0%,
		rgb(238,238,238) 100%
	);
}
div.box div#head2 {color:#464646;}
div.box div#foot2{
	padding:6px 0 9px 12px;
	color:#CCC;
	font:normal 10pt tahoma;
	border-bottom-left-radius: 8px; -moz-border-radius-bottomleft: 8px;
	border-bottom-right-radius: 8px; -moz-border-radius-bottomright: 8px;
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0, rgb(227,227,227)),
		color-stop(1, rgb(238,238,238))
	);
	background-image: -moz-linear-gradient(
		center bottom,
		rgb(227,227,227) 0%,
		rgb(238,238,238) 100%
	);
}
div.box div#foot2 {color:#464646;}


table.form2c {background-color:#ececec;width:100%;}
table.form2c td,table.form2c th{padding:6px 14px;}
table.form2c tbody th{font-weight:bold;text-align:left;vertical-align:top;	border-right:1px solid #D9D9D9; }
table.form2c thead th{
	font-weight:bold;text-align:center;
	background-color:#666;
	color:#CCC;
}
table.form2c thead th.left{ 
	border-top-left-radius: 8px; -moz-border-radius-topleft: 8px;
}
table.form2c thead th.right{ 
	border-top-right-radius: 8px; -moz-border-radius-topright: 8px;
}

/********
 * table important overide
 ********/
table .nocorner{ -moz-border-radius: 0 !important; border-radius: 0 !important;}
table .nopad{padding:0 !important;}

/********
 * commponent
 ********/
 /* attachment */
div.attachbox{ float:left;width:150px; }
div.attachbox div.attachico{ float:left;width:70px; }
div.attachbox div.attachaction{ float:left;width:40px; display:none; }
div.attachbox:hover div.attachaction{ float:left;width:40px; display:block; }

